<script setup lang="ts" name="DictBook">

const props = defineProps(['locate','device'])

const emits = defineEmits(['select'])

/*========================================>( 模板属性 )<========================================*/
//成像设备
const device = ref<string>('CT')
//字典所属 1公共 2私有
const dictType = ref<number>(1)
//活跃的字典抬头
const activeDictId = ref<number>()
//字典条目
const dictList = ref<Array<any>>([])
//内容box高度
const dictContentHeight = ref<string>()
//目前展示的字典条目
const dictValueList = ref<Array<any>>([])



/*========================================>( 作用域属性 )<========================================*/
const _devices = [
    { label: 'RF', value: 'RF' },
    { label: 'DX', value: 'DX' },
    { label: 'MR', value: 'MR' },
    { label: 'CT', value: 'CT' }
]
//IPC
const _ipc = {
    getDictList(device: string) {
        window.$.send('DICT-QUERY', { device })
    },
    getDictValueList(dictId: number) {
        window.$.send('DICT-VALUE-QUERY', { dictId })
    }
}

/*========================================>( 普通方法 )<========================================*/
//获取字典数据
const handleChangeDictDevice = () => {
    _ipc.getDictList(device.value)
}
//初始化监听
const initListener = () => {
    window.$.listen('DICT-QUERY-CALL', (e, data) => {
        console.log('监听到数据', data)
        dictList.value = data.rows
        handleDictClick(getLikedDictId(props.locate,data.rows))
    })
    window.$.listen('DICT-VALUE-QUERY-CALL', (e, data) => {
        console.log('监听到子数据', data)
        dictValueList.value = data.rows
        initDictHeight()
    })
}

const initDictHeight = () => {
    nextTick(() => {
        const allH = Number(document.querySelector('.dict-book')?.clientHeight)
        const dicNameHeight = Number(document.querySelector('.dict-book .series')?.clientHeight)
        dictContentHeight.value = allH - 140 - dicNameHeight + 'px'
        console.log('dictContentHeight.value',dictContentHeight.value)
    })
}

//拿出匹配度最高的部位词条
const getLikedDictId = (name:string, dictList:Array<any>)=>{
    let likeRatio = 0
    let lickedDictId = dictList[0].id
    for (const d of dictList) {
        const exampleStr = d.name + (d.meta??'')
        const r = levenshtein(name, exampleStr)
        if (r > likeRatio) {
            lickedDictId = d.id
            likeRatio = r
        }
    }
    return lickedDictId
}
//匹配度算法
const levenshtein = (str1:string, str2:string)=>{
    // 计算两个字符串长度
    const len1 = str1.length;
    const len2 = str2.length;
    // 创建装载数组
    const dif = [];
    for (let i = 0; i < len1 + 1; i++) {
        dif.push(new Array(len2 + 1));
    }
    // 赋初始值
    for (let i = 0; i <= len1; i++) {
        dif[i][0] = i;
    }
    for (let i = 0; i <= len2; i++) {
        dif[0][i] = i;
    }
    // 计算两个字符串是否一样
    const ch1 = str1.split('');
    const ch2 = str2.split('');
    let temp;
    for (let i = 1; i <= len1; i++) {
        for (let j = 1; j <= len2; j++) {
            if (ch1[i - 1] == ch2[j - 1]) {
                temp = 0;
            } else {
                temp = 1;
            }
            // 取最小值
            const temp1 = dif[i - 1][j - 1] + temp;
            const temp2 = dif[i][j - 1] + 1;
            const temp3 = dif[i - 1][j] + 1;

            dif[i][j] = Math.min(temp1, temp2, temp3);
        }
    }
    // 计算相似度
    const similarity = 1 - dif[len1][len2] / Math.max(str1.length, str2.length);
    return similarity;
}

/*========================================>( 监听方法 )<========================================*/
//快速保存为字典
const handleQuickSave = () => {

}
//点击字典条目
const handleDictClick = (id: number) => {
    activeDictId.value = id
    _ipc.getDictValueList(id)
}
//监听点击
const handleClick = (item: any) => {
    // _ipc.getDictList(device.value)
    emits('select',item)
}

/*========================================>( 钩子 )<========================================*/
onMounted(() => {
    initListener()
    device.value = props.device.toUpperCase()
    handleChangeDictDevice()
})
</script>
<template>
	<div class="main-content dict-book">
		<div style="font-size: 18px; font-weight: bold;padding-left: 5px;height: 50px;line-height: 50px">
			<i class="el-icon-full-screen"></i>
			<span class="text-[#fff] f-15">筛选：</span>
			<el-select v-model="device" @change="handleChangeDictDevice" placeholder="请选择" style="width:100px;margin-left:5px;">
				<el-option v-for="(item, index) in _devices" :key="index" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<el-select v-model="dictType" @change="handleChangeDictDevice" placeholder="请选择" style="width:90px;margin-left:5px;">
				<el-option label="公共" :value="1"></el-option>
				<el-option label="自定义" :value="2"></el-option>
			</el-select>
			<el-button plain type="danger" style="margin-left:5px;width: 70px" @click="handleQuickSave">快速保存<i class="el-icon-arrow-right el-icon--right"></i></el-button>
		</div>
		<div class="series">
			<div v-for="(item, index) of dictList" :key="index" class="item" :class="{ 'active': item.id == activeDictId }" @click="handleDictClick(item.id)">{{ item.name }}</div>
		</div>
		<div class="contents" :style="{ 'height': dictContentHeight }" style="display: block">
			<div v-if="dictValueList.length == 0" style="width:100%;text-align: center;padding-top:20px;">- 无 -</div>
			<el-tooltip v-for="(item, index) in dictValueList" :key="index" effect="dark" placement="left" :hide-after="0" :show-after="500">
				<template #content>
					<div style="width:300px;font-size:16px;">
						<span style="color:#FFD306">标题：</span>{{ item.title }}<br />
						<span style="color:#FFD306">检查所见：</span><span v-html="item.check_content"></span><br />
						<span style="color:#FFD306">诊断印象：</span><span v-html="item.diagnose_content"></span>
					</div>
				</template>
				<div class="item" :class="{ 'normal': item.status == 1, 'warning': item.status == 2 }" @click="handleClick(item)">
					<div class="ic">
						<el-icon size="20" style="padding-top: 11px ">
							<SuccessFilled v-show="item.status == 1" color="rgb(153, 204, 102)" />
							<WarnTriangleFilled v-show="item.status != 1" color="red" />
						</el-icon>
						<i :class="item.status == 1 ? 'el-icon-s-claim' : 'el-icon-s-release'" :style="'color:' + (item.status == 1 ? '#99CC66' : '#FF9999')"></i>
					</div>
					<div class="name">{{ item.title }}</div>
					<div class="status">{{ item.status == 1 ? '正常' : '异常' }}</div>
				</div>
			</el-tooltip>
		</div>
	</div>
</template>
<style lang="scss"></style>
<style lang="scss" scoped>
.main-content.dict-book {
    width: 95%;
    margin: 0 auto;
    border: solid 1px #ccc;
    height: 100%;

    .series {
        width: 100%;
        height: auto;
        max-height: 260px;
        overflow-y: auto;
        padding: 0 10px;

        .item {
            // width: 75px;
            padding: 0 5px;
            height: 25px;
            line-height: 23px;
            float: left;
            text-align: center;
            background-color: #fff;
            margin: 3px;
            cursor: pointer;
            color: #666;

            &:hover {
                box-shadow: 1px 1px 5px #666;
                color: #000;
            }

            &.active {
                color: #fff;
                background-color: #0080ff;
            }
        }
    }

    .contents {
        width: 100%;
        height: auto;
        margin-top: 15px;
        overflow-y: auto;

        .item {
            width: 90%;
            height: 30px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            margin: 5px auto;
            cursor: pointer;
            color: #fff;
            background-color: #666;

            &:hover {
                color: #ccc;
            }

            .ic {
                width: 30px;
                height: 100%;
                text-align: center;
                color: #ffd306;
            }

            .name {
                flex: 1;
                height: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .status {
                width: 60px;
                height: 100%;
                text-align: center;
            }
        }
    }
}
</style>
